<template>
  <div class="net-router relative">
    <page-loading></page-loading>
    <div class="view-table mb20">
      <div class="table-title">
        {{info1.title}}:
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w100">
          <col class="w80">
          <col class="w70">
          <col class="w70">
          <col class="w50">
          <col class="w40">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in info1.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><el-select class="select-cell"></el-select></td>
            <td v-for="n in 4">
              <input type="text" class="input-none bottom-line text-center input-cell" />
             </td>
             <td><span class="add">{{info1.add}}</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="view-table mb20">
      <div class="table-title">
        {{info2.title}}:
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w60">
          <col class="w100">
          <col class="w100">
          <col class="w50">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in info2.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td v-for="n in 4">
              <input type="text" class="input-none bottom-line text-center input-cell" />
             </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>

  export default {

    data(){
      return {
        info1: this.$t('network.router.info1'),
        info2: this.$t('network.router.info2'),
      }
    },
    created(){
      console.log(this.$store.state.dialog.modal_show)
    }
  }
</script>

<style lang="scss" scoped>

</style>
